<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据看板</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <style>
        body {
            background-color: #f5f5f5;
            padding: 20px;
        }
        
        .layui-card {
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            border-radius: 4px;
        }
        
        .stat-card {
            text-align: center;
            padding: 20px 0;
        }
        
        .stat-icon {
            font-size: 48px; /* 增大图标尺寸 */
            margin-bottom: 15px;
        }
        
        .stat-number {
            font-size: 28px; /* 稍微增大数字字体 */
            font-weight: bold;
            margin: 15px 0;
        }
        
        .stat-label {
            color: #666;
        }
        
        .quick-actions {
            margin: 20px 0;
        }
        
        .recent-activities {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="layui-container">
        <!-- 统计卡片 -->
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md4">
                <div class="layui-card">
                    <div class="layui-card-body stat-card">
                        <div class="stat-icon" style="color: #1e88e5;">
                            <i class="layui-icon layui-icon-chart"></i>
                        </div>
                        <div class="stat-number">128</div>
                        <div class="stat-label">路口数据总量</div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-card">
                    <div class="layui-card-body stat-card">
                        <div class="stat-icon" style="color: #4caf50;">
                            <i class="layui-icon layui-icon-file"></i>
                        </div>
                        <div class="stat-number">56</div>
                        <div class="stat-label">优化记录数量</div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-card">
                    <div class="layui-card-body stat-card">
                        <div class="stat-icon" style="color: #ff9800;">
                            <i class="layui-icon layui-icon-engine"></i>
                        </div>
                        <div class="stat-number">23</div>
                        <div class="stat-label">AI分析次数</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 快捷操作 -->
        <div class="layui-row quick-actions">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">快捷操作</div>
                    <div class="layui-card-body">
                        <div class="layui-btn-container">
                            <button class="layui-btn layui-btn-primary">
                                <i class="layui-icon layui-icon-add-1"></i> 新增路口数据
                            </button>
                            <button class="layui-btn layui-btn-primary">
                                <i class="layui-icon layui-icon-engine"></i> 启动AI分析
                            </button>
                            <button class="layui-btn layui-btn-primary">
                                <i class="layui-icon layui-icon-list"></i> 查看数据记录
                            </button>
                            <button class="layui-btn layui-btn-primary">
                                <i class="layui-icon layui-icon-chart"></i> 查看分析报告
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 最近活动 -->
        <div class="layui-row recent-activities">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">最近活动</div>
                    <div class="layui-card-body">
                        <table class="layui-table">
                            <colgroup>
                                <col width="200">
                                <col>
                                <col width="200">
                            </colgroup>
                            <thead>
                                <tr>
                                    <th>时间</th>
                                    <th>活动内容</th>
                                    <th>操作人员</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>2025-09-22 14:30</td>
                                    <td>新增路口数据 - 解放路与中山路交叉口</td>
                                    <td>管理员</td>
                                </tr>
                                <tr>
                                    <td>2025-09-22 10:15</td>
                                    <td>完成AI分析 - 人民路与建设路交叉口</td>
                                    <td>管理员</td>
                                </tr>
                                <tr>
                                    <td>2025-09-21 16:45</td>
                                    <td>录入优化记录 - 朝阳路与光明路交叉口</td>
                                    <td>管理员</td>
                                </tr>
                                <tr>
                                    <td>2025-09-21 09:20</td>
                                    <td>新增路口数据 - 黄河路与长江路交叉口</td>
                                    <td>管理员</td>
                                </tr>
                                <tr>
                                    <td>2025-09-20 13:50</td>
                                    <td>完成AI分析 - 解放路与中山路交叉口</td>
                                    <td>管理员</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="./layui/layui.js"></script>
    <script>
        layui.use(['element'], function(){
            var element = layui.element;
        });
    </script>
</body>
</html>